import React from "react";
import {Button, Col, DatePicker, Icon, Input, Popconfirm, Radio, Row, Select, Steps, Table, Tabs} from "antd";
import GoodsAdd from "../add/index"; //新增
import data from "./data";

//常用组件引用
const ButtonGroup = Button.Group;       //组合按钮
const Option = Select.Option;           //下拉框
const {MonthPicker, RangePicker} = DatePicker;//日历
const Step = Steps.Step;                //步骤条
const Search = Input.Search;    //搜所框
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const TabPane = Tabs.TabPane;


export default class ListGoods extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      //右侧滑层
      isShowRightGoodsAdd: true,      //月嫂
    };
  }

  //---右侧滑层
  //右侧滑层-新增订单
  RightGoodsAdd = (e) => {
    document.getElementById('Test').scrollTop = 0;
    this.setState({
      'isShowRightGoodsAdd': true,
    })
  }
  RightGoodsAddClose = (e) => {
    this.setState({
      'isShowRightAuntInfo': false,
      'isShowRightGoodsAdd': false,
    })
  }

  render() {
    let that = this;
    let auntList = data.auntListTable;
    let {sortedInfo, filteredInfo} = this.state;
    sortedInfo = sortedInfo || {};
    filteredInfo = filteredInfo || {};
    const columns = [
      {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
        width:'25%',
      }, {
        title: '上架状态',
        dataIndex: 'state',
        key: 'state',
        width:'25%',
        className: 'ant-table-th-center',
        render: (value) => {
          return (
            <div>
              {
                value == '已下架' ? <span className="col-grey">{value}</span> : <span>{value}</span>
              }
            </div>
          )
        },
      },
      {
        title: '销售区域',
        dataIndex: 'region',
        key: 'region',
        width:'25%',
        className: 'ant-table-th-center'
      },{
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        className: 'ant-table-th-center',
        render: () => {
          return (
            <div className="table-a-cont">
              <a href="javascript:void(0)">编辑</a>
              <a href="javascript:void(0)">下架</a>
              <Popconfirm title="确定删除?">
                <a href="javascript:void(0)">删除</a>
              </Popconfirm>
            </div>
          )
        },
      }
    ];
    const pagination = {
      // total: this.state.tDate.length,
      total: 50,
      showSizeChanger: false,
      defaultPageSize:5,
    }
    return (
      <div>
        <h3 className="title-h3">商品管理</h3>
        {/*搜索*/}
        <div className="search-cont">
          <Row gutter={16}>
            <Col span="4">
              <Input placeholder="input输入框" size="large"/>
            </Col>
            <Col span="4">
              <Select defaultValue="选择下拉框" size="large">
                <Option value="选择下拉框">选择服下拉框</Option>
              </Select>
            </Col>
            <div className="search-btncont search-btncontfr">
                <Button size="large" type="primary">搜索</Button>
            </div>
          </Row>
        </div>
        {/*按钮*/}
        <div className="search-cont2">
          <ButtonGroup>
            <Button onClick={that.RightGoodsAdd}>新增商品</Button>
          </ButtonGroup>
        </div>
        {/*表格*/}
        <Table columns={columns} bordered dataSource={auntList.toJS()} pagination={pagination}
        />
        {/*新增------有锚点就加 rightSlip-Anchor*/}
        <div
          className={this.state.isShowRightGoodsAdd ? 'rightSlip animated fadeInRight' : 'rightSlip animated fadeOutRight'}>
          <a href="javascript:void(0)" className="rightSlipClose"
             onClick={this.RightGoodsAddClose}><Icon type="close"/></a>
          <GoodsAdd />
        </div>
      </div>
    )
  }
}
